<template>
    <div id="new-school">
        <el-breadcrumb separator="/" class="common-bread">
            <el-breadcrumb-item :to="{ path: '/school' }">学校管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{operationText}}学校</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="form mt10 contentBox">
            <div class="list_head">
                <span class="head_name">学校信息</span>
                <el-button type="primary" @click="$router.push('/school')" class="fr ml10">返回</el-button>
                <el-button type="primary" @click="save" class="fr">保存</el-button>
            </div>
            <el-form label-width="120px" :model="form" :rules="rules" ref="form">
                <el-form-item label="学校编号：" prop="schoolCode">
                    <el-input v-model="form.schoolCode"></el-input>
                </el-form-item>
                <el-form-item label="学校名称：" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="省市：" prop="cityId">
                    <el-select v-model="form.cityId" @change="getZones">
                        <el-option :label='item.areaName' :value='item.areaId' v-for="item in cities" :key="item.areaId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="区县：" prop="zoneId">
                    <el-select v-model="form.zoneId">
                        <el-option :label='item.areaName' :value='item.areaId' v-for="item in zones" :key="item.areaId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类型：" prop="schoolType">
                    <el-checkbox-group v-model="form.schoolType">
                        <el-checkbox label="高中"></el-checkbox>
                        <el-checkbox label="初中"></el-checkbox>
                        <el-checkbox label="小学"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="标签：" prop="tags">
                    <el-input v-model='tag'></el-input>
                    <el-button type="primary" @click="addTag">添加标签</el-button>
                </el-form-item>
                <div class="tagsContain">
                    <span class="tag" v-for="(item,index) in tags">
                        {{item}}<i class="el-icon-circle-close" @click="tags.splice(index, 1)"></i>
                    </span>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";

    export default {

        data() {
            let validBlank = (rule, value, callback) => {
                value = value.trim();
                if (value) {
                    callback();
                } else {
                    callback(new Error("不能为空或空格"));
                }
            };

            let validSchoolCode = (rule, value, callback) => {
                value = value.trim();
                if (value) {
                    if (value.length > 50) {
                        callback(new Error("字符长度不能超过50个字符"));
                    } else {
                        callback();
                    }
                } else {
                    callback(new Error("不能为空或空格"));
                }
            };

            return {
                id: "",
                operationText: "添加",
                tags: [],
                tag: '',
                form: {
                    schoolCode: "",
                    name: "",
                    cityId: null,
                    zoneId: null,
                    schoolType: []
                },
                cities: [],
                zones: [],
                rules: {
                    schoolCode: [
                        { required: true, message: "学校编号不能为空", trigger: "blur" },
                        { validator: validSchoolCode }
                    ],
                    name: [
                        { required: true, message: "学校名称不能为空", trigger: "blur" },
                        { validator: validBlank }
                    ],
                    cityId: [
                        { required: true, message: "请选择省市", trigger: "change" }
                    ],
                    zoneId: [
                        { required: true, message: "请选择区县", trigger: "change" }
                    ],
                    schoolType: [
                        { required: true, message: "请选择学校类型", trigger: "change" }
                    ]
                }
            }
        },
        computed: mapState({ user: state => state.user }),
        mounted() {
            this.getCities();
            this.$util.setStore("schSelect", "1");
            this.id = this.$util.getUrlParam("id");
            if (this.id) {
                this.operationText = "编辑";
                this.getDetail();
            };
        },
        methods: {
            //获取城市列表
            getCities() {
                this.$util.getCities().then(cities => {
                    this.cities = cities;
                })
            },
            //获取区县列表
            getZones() {
                this.$util.getZones(this.form.cityId).then(zones => {
                    this.zones = zones;
                    this.form.zoneId = this.zones[0].areaId;
                })
            },
            save() {
                this.$refs.form.validate(valid => {
                    if (valid) {

                        let requestParam = {
                            schoolCode: this.form.schoolCode.trim(),
                            name: this.form.name.trim(),
                            areaId: this.form.zoneId,
                            haveHigh: this.form.schoolType.includes("高中"),
                            haveMiddle: this.form.schoolType.includes("初中"),
                            havePrimary: this.form.schoolType.includes("小学"),
                            tags: this.tags.length ? this.tags.join("-") : ""
                        }

                        if (this.id) requestParam.schoolId = this.id;

                        this.$axios.post("/adminapi/v1/tools/schools/addOrEdit", requestParam).then(response => {
                            if (response.data.error == 10000) {
                                this.$router.push("/school");
                                this.$util.successMsg("保存成功");
                            } else {
                                this.$util.errorMsg(response.data.message);
                            }
                        })
                    }
                })
            },
            //获取学校详情
            getDetail() {
                this.$axios.get("/adminapi/v1/tools/schools/info?schoolId=" + this.id).then(response => {
                    if (response.data.error == 10000) {
                        let info = response.data.data;
                        this.tags = info.tags ? info.tags.split("-") : [];

                        info.schoolType = [];
                        if (info.haveHigh) info.schoolType.push("高中");
                        if (info.havePrimary) info.schoolType.push("小学");
                        if (info.haveMiddle) info.schoolType.push("初中");
                        this.$util.getCityAndZoneById(info.areaId).then(area => {
                            this.form = {
                                schoolCode: info.schoolCode,
                                name: info.name,
                                schoolType: info.schoolType,
                                cityId: area.city.areaId,
                                zoneId: area.zone.areaId
                            };
                            this.getZones();
                        })

                    }
                })
            },
            addTag() {
                if (this.tag && this.tag.trim() && !this.tags.includes(this.tag)) {
                    if (this.tags.length >= 5) return this.$util.errorMsg("最多添加5个标签");
                    this.tags.push(this.tag);
                    this.tag = '';
                }
            }
        }
    }
</script>
<style>
    #new-school .tagsContain {
        width: 700px;
        height: 135px;
        margin-left: 120px;
        margin-bottom: 30px;
        border: solid 1px gray;
        box-sizing: border-box;
        overflow-y: scroll;
    }

    span.tag {
        display: block;
        text-align: center;
        float: left;
        padding: 5px 15px;
        border: solid 1px #999;
        border-radius: 5px;
        margin: 10px;
        box-sizing: border-box;
        font-size: 12px;
        position: relative;
        cursor: pointer;
    }

    #new-school .el-select {
        width: 300px;
    }

    #new-school .el-select>.el-input,
    #new-school .select-head>.el-input {
        width: 300px;
    }
</style>